<template>
    <div class="total">
    <div class="all" >
      <div class="top">
       登录
      </div>
      <div class="main">
          <el-form  :model="user" :rules="rules" ref="loginIn">
              <el-form-item  prop= "name" >
                  <el-input type="text"  v-model="user.name" ref="name"  placeholder="用户名/手机号/邮箱"></el-input>
              </el-form-item>
              <el-form-item  prop= "pass" >
                  <el-input type="password" v-model="user.pass" ref="pass"  placeholder="密码"></el-input>
              </el-form-item>

            <el-form-item>
              <el-button type="primary" :plain="true" @click="submitForm()" >登录</el-button>
            </el-form-item>
          </el-form>
        
              <div class="footer">
                <router-link to="/login" style="text-decoration: none;">立即注册</router-link>
              </div>
      </div>
      </div>
    </div>
  </template>
  
  <script>

  export default {
    data(){
      return{
    
        user:{
          name:'',
          pass:"",
          code:""
        },
        getname:'',
        getpass:'',
        aa:false,
        rules:{
          name: [{required: true, validator:this.nameValidator,trigger:'blur'}],
          pass: [{required: true, validator:this.passValidator,trigger:'blur'}],
        }
      }
    },
  
    methods:{
      nameValidator(rule,value,cb){
        if(value==""){
          cb(new Error("用户名不为空"))
        }else if(value==this.getname){
          cb()
        } 
          else{
            cb(new Error("账号未注册"))
          }                                                                                                                                                       
            
        },
        
      passValidator(rule,value,cb){
        if(value==""){
          cb(new Error("密码不为空"))
        }else if(value==this.getpass){
          cb()
        }else{
          cb(new Error("密码错误"))
        }                                                                                                                                                        
            
        },
    
  
      submitForm(){
  
        this.$refs.loginIn.validate((valid)=>{
            if(valid){
              //跳转页面
              this.$router.push('home')
              // this.$message({
              //   // message:'登陆成功',
              //   type:'success'
              // })
            }else{
              this.$message.error('登陆失败')
              return false;
            }
          })
      }
  
    },
    mounted(){
     
      this.verifyCode=new GVerify('v_container')
      
      //获取对象用JSON.parse()
      var a=JSON.parse(localStorage.getItem("a"))
      this.getname=a.getname
      this.getpass=a.getpass
      console.log(this.getname)
      console.log(this.getpass)
  
    }
  
  }
  </script>
  
  <style scoped>
        .total{
          width: 100%;
          height: 500px;
          background-color: #ccc;;
        }
        .all{
          position: relative;
                  top: 50px;
                  width: 300px;
                  height: 400px;
                  background: #fff;
                  border-radius: 8px;
                  margin: auto;
                  padding: 20px 35px 20px;
          
        }
        .top{
        font-family:STKaiti;
        padding: 10px 0px 10px 0px;
        width: 300px;
        margin: auto;
        font-size: 20px;
        padding-left: 100px;
        letter-spacing:10px;
  
   
      }
      .main{
      width: 300px;
      margin: 10px auto;
      }
      .ts p{
        width: 200px;
        float: left;
        color: red;
        margin: 0px;
        font-size: 10px;
      }
      .ts a{
        float: right;
        font-size: 12px;
        text-decoration: none;
        padding-bottom: 5px;
      }
      .info{
                  font-size: 14px;
                  text-align: center;
                  margin-bottom: 10px;
       
              }
        .info a{
          text-decoration: none;
          margin: 0px 5px 0px 5px ;
        }
        .el-button{
        width: 300px;
        }
        .footer{
          text-align: right;
          margin-top:0px ;
          font-size: 12px;
        }
       #v_container{
        width: auto;
       }
          
  </style>